<script setup>
import { useRouter } from "vue-router";
import { reactive, onMounted } from "vue";
import { getTimeKe, getMyke } from "@/http/api.js";
import moment from "moment";
const router = useRouter();
const data = reactive({
  flag: 1,
  time: [],
  date: "",
  show: true,
  List: [],
});
const token = localStorage.getItem("token");
if (!token) {
  data.flag = 0;
} else {
  data.flag = 1;
}
onMounted(() => {
  getTimes();
  MYke(); // 我的课列表
});
// 时间
const getTimes = async () => {
  const res = await getTimeKe();
  console.log(res);
  data.time = res.timeList;
  // res.timeList.forEach((v) => moment(v.time).format("YYYY-MM-DD HH:mm:ss"));
  // console.log(res.timeList);
  // let a = new Date(data.time);
  // console.log(a);
};
// 我的课列表
const MYke = async () => {
  const res = await getMyke();
  console.log("我的课列表：：：：：：", res);
  data.List = res;
};
const onConfirm = () => {
  data.show = true;
};
const Ok = () => {
  data.show = false;
};
// 换算时间函数
const times = (val) => {
  return new Date(val * 1000).toLocaleDateString();
};
</script>
<template>
  <div class="ke">
    <div class="box" v-if="data.flag == 0">
      <p class="p1">请登录后查看相关内容</p>
      <p class="p2">
        <span @click="$router.push('/login')">登录/</span
        ><span @click="$router.push('/zhuce')">注册</span>
      </p>
    </div>
    <div class="box1" v-if="data.flag == 1">
      <h1 v-for="(item, index) in data.time" :key="index">
        {{ item }}
      </h1>
      <!-- 日历 -->
      <van-cell title="选择单个日期" :value="data.date" @click="onConfirm" />
      <van-calendar v-model:show="data.show" @confirm="Ok" />

      <div class="box2">
        <ul>
          <li @click="$router.push('/xxjl')">
            <img
              src="https://wap.lexuemiao.com/img/history-full@3x.fd48535a.png"
              alt=""
            />
            <p>学习记录</p>
          </li>
          <li @click="$router.push('/xxzl')">
            <img
              src="	https://wap.lexuemiao.com/img/ziliao@3x.6d7c3da4.png"
              alt=""
            />
            <p>学习资料</p>
          </li>
        </ul>
      </div>
      <div class="box3">
        <h1>正在学习的课程</h1>
        <p>查看更多></p>
      </div>
      <!-- 列表 -->
      <ol>
        <li
          v-for="(item, index) in data.List"
          :key="item.id"
          @click="$router.push(`/goods/${item.id}`)"
        >
          <span class="sp">{{ item.course_classify_title }}</span>
          <p class="p1">{{ item.title }}</p>
          <p class="p2">
            课程有效期{{ times(item.course_validity_date) }} 00:00
          </p>
          <p class="p3"><span>直播课</span><span>2课时</span></p>
          <div class="div1">
            <p
              v-for="(item1, index1) in item.teacher"
              :key="index1"
              class="teacher"
            >
              <img :src="item1.avatar" alt="" />
              <span>{{ item1.teacher_name }}</span>
            </p>
          </div>
        </li>
      </ol>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ke {
  padding: 0 30px;
  .box {
    width: 100%;
    height: 300px;
    text-align: center;
    margin-top: 200px;
    .p1 {
      font-size: 32px;
      color: #333;
    }
    .p2 {
      font-size: 34px;
      width: 3.14667rem;
      height: 1.06667rem;
      background: #f15a24;
      border-radius: 0.10667rem;
      color: #fff;
      line-height: 1.06667rem;
      margin: 0 auto;
    }
  }
  .box1 {
    font-size: 42px;
  }
  .box2 {
    width: 100%;
    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        width: 50%;
        text-align: center;
        img {
          width: 30%;
        }
        p {
          font-size: 0.34667rem;
          font-family: PingFang SC;
          font-weight: 600;
          color: #60657a;
          margin-top: 10px;
        }
      }
    }
  }
  .box3 {
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    h1 {
      font-size: 48px;
    }
    p {
      font-size: 28px;
    }
  }
  ol {
    padding: 0 20px;
    margin-top: 50px;
    margin-bottom: 100px;

    li {
      font-size: 32px;
      margin: 30px 0;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 0.04rem 0.09333rem 0 hsl(0deg 0% 81% / 35%);
      padding-bottom: 30px;
      .sp {
        width: 120px;
        font-size: 25px;
        padding: 10px 10px;
        background: orangered;
        color: #fff;
      }
      .p1 {
        margin-left: 20px;
      }
      .p2 {
        margin-left: 20px;
        font-size: 0.32rem;
        color: #666;
      }
      .p3 {
        font-size: 0.29333rem;

        span {
          margin: 0 20px;
          padding: 10px 4.2672px;
          height: 0.53333rem;
          background: #f4f4f4;
          line-height: 8.5333px;
          text-align: center;
          border-radius: 0.08rem;
          color: #999;
        }
      }
      .div1 {
        display: flex;
        align-items: center;
        margin: 40px 40px;
        .teacher {
          margin: -10px -20px;
        }
        img {
          width: 50px;
          height: 50px;
          vertical-align: middle;
          border-radius: 50%;
        }
        span {
          margin-left: 10px;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
